<template>
  <div class="app-content flex">
    <div class="h100 flex-column tree-left">
      <el-input class="mb20 tree-input" v-model="filterText" placeholder="请输入编码" clearable />
      <el-scrollbar class="card h0 flex1">
        <el-tree
          ref="treeRef"
          :data="deviceTreeList"
          :props="{children: 'deviceList'}"
          default-expand-all
          :filter-node-method="filterNode"
          @node-click="handleClick"
        >
        </el-tree>
      </el-scrollbar>
    </div>
    <div class="h100 flex1 device-right">
      <div class="status-tip">
        <div class="card warn-status mb5">
          <div class="mb10">预警状态</div>
          <div class="flex-alignc-justifyb">
            <div class="polygon round round1">无预警({{ showStatusInfo.deviceShowStatus3 }})</div>
            <div class="polygon round round2">预警({{ showStatusInfo.deviceShowStatus1 }})</div>
            <div class="polygon round round3">告警({{ showStatusInfo.deviceShowStatus4 }})</div>
          </div>
        </div>

        <div class="card">
          <div class="mb10">功率状态</div>
          <div class="flex-alignc-justifyb">
            <div class="polygon polygon1">较高({{ powerStatusInfo.devicePowerStatus1 }})</div>
            <div class="polygon polygon2">正常({{ powerStatusInfo.devicePowerStatus2 }})</div>
            <div class="polygon polygon3">偏低({{ powerStatusInfo.devicePowerStatus3 }})</div>
            <div class="polygon polygon4">关闭({{ powerStatusInfo.devicePowerStatus4 }})</div>
          </div>
        </div>
      </div>
      <device-map ref="deviceMap" :data="deviceList"></device-map>
    </div>
  </div>
</template>

<script setup>
import { deviceTreeListApi,deviceLocationApi } from '@/api/station';
import DeviceMap from './DeviceMap.vue';
import useUserStore from '@/store/modules/user'
const userStore = useUserStore()

// 获取电站网关组件树形列表
const filterText = ref('')
const treeRef = ref()
watch(filterText, (val) => {
  treeRef.value.filter(val)
})
const filterNode = (value, data) => {
  if (!value) return true
  return data.label.includes(value)
}
const handleClick = (e) => {
  if(e.deviceId) {
    deviceMap.value.openInfoWindow(e)
    // deviceInfo.value = e
  }
}
const deviceTreeList = ref([])
const deviceInfo = ref()
const getDeviceTreeList = async () => {
  try {
    let res = await deviceTreeListApi({
      stationId:userStore.stationInfo.stationId
    })
    res.data.forEach(item => {
      item.label = item.controllerName
      item.deviceList.forEach(item1 => {
        item1.label = item1.logicAddress
        item1.controllerName = item.controllerName
        item1.controllerNo = item.controllerNo
      })
    });
    deviceTreeList.value = res.data
  }catch(err) {}
}

// 获取电站网关地图组件信息
const deviceMap = ref()
const showStatusInfo = ref({ // 预警状态数量
  deviceShowStatus3:0,
  deviceShowStatus1:0,
  deviceShowStatus4:0,
})
const powerStatusInfo = ref({ // powerStatus 功率状态 1正常(较高) 2 预警(正常) 3 告警(偏低) 4 关闭
  devicePowerStatus1:0,
  devicePowerStatus2:0,
  devicePowerStatus3:0,
  devicePowerStatus4:0,
})
const deviceList = ref([])

const getDeviceLocation = async () => {
  try {
    let res = await deviceLocationApi({
      id:userStore.stationInfo.stationId
    })
    deviceList.value = res.data
    showStatusInfo.value.deviceShowStatus3 = deviceList.value.filter(item => item.deviceShowStatus==3).length
    showStatusInfo.value.deviceShowStatus1 = deviceList.value.filter(item => item.deviceShowStatus==1).length
    showStatusInfo.value.deviceShowStatus4 = deviceList.value.filter(item => item.deviceShowStatus==4).length

    powerStatusInfo.value.devicePowerStatus1 = deviceList.value.filter(item => item.powerStatus==1).length
    powerStatusInfo.value.devicePowerStatus2 = deviceList.value.filter(item => item.powerStatus==2).length
    powerStatusInfo.value.devicePowerStatus3 = deviceList.value.filter(item => item.powerStatus==3).length
    powerStatusInfo.value.devicePowerStatus4 = deviceList.value.filter(item => item.powerStatus==4).length
  }catch(err) {}
}

onMounted(() => {
  getDeviceTreeList()
  getDeviceLocation()
})
</script>

<style lang="scss" scoped>
.app-content {
  height: calc(100vh - 84px);
}

.device-right {
  position: relative;
  z-index: 1;
}
.status-tip {
  position: absolute;
  top: 10px;
  right: 10px;
  z-index: 100;
  width: 350px;
  .polygon {
    position: relative;
    display: flex;
    align-items: center;
    &::before {
      content: '';
      display: block;
      width: 10px;
      height: 10px;
      // background-color: #a2ef4d;
      margin-right: 5px;
    }
    &.polygon1 {
      &::before {
        background-color: #347caf;
      }
    }
    &.polygon2 {
      &::before {
        background-color: #4095e5;
      }
    }
    &.polygon3 {
      &::before {
        background-color: #93d2f3;
      }
    }
    &.polygon4 {
      &::before {
        background-color: #cecece;
      }
    }
  }
  .round {
    &::before {
      border-radius: 50%;
    }
    &.round1 {
      &::before {
        // background-color: #a2ef4d;
        background-color: #32C275;
      }
    }
    &.round2 {
      &::before {
        background-color: #e99d42;
      }
    }
    &.round3 {
      &::before {
        background-color: #fd0909;
      }
    }
  }
}
</style>
